<template>
    <div class="root">
       <div class="title">
            <div class="title1 bak">
                <div class="title_total">
                    <div class="zhong">总乘客数</div>
                    <div class="price">20000</div>
                    <div class="add"><text>比昨日+0</text><image src=""></image></div>
                </div>
                <div class="imgdiv">
                    <img src="../assets/datacenterimg/user.png"></img>
                </div>
            </div>
            <div class="title1 bak2">
                <div class="title_total">
                    <div class="zhong">推荐乘客数</div>
                    <div class="price">200</div>
                    <div class="add"><text>比昨日+0</text><image src=""></image></div>
                </div>
                <div class="imgdiv" style="height: 62%;">
                    <img src="../assets/datacenterimg/vip.png"></img>
                </div>
            </div>
            <div class="title1 bak3">
                <div class="title_total">
                    <div class="zhong">总司机数</div>
                    <div class="price">3000</div>
                    <div class="add"><text>比昨日+0</text><image src=""></image></div>
                </div>
                <div class="imgdiv">
                    <img src="../assets/datacenterimg/xin.png"></img>
                </div>
            </div>
            <div class="title1 bak4">
                <div class="title_total">
                    <div class="zhong">注册司机数</div>
                    <div class="price">2000</div>
                    <div class="add"><text>比昨日+0</text><image src=""></image></div>
                </div>
                <div class="imgdiv">
                    <img src="../assets/datacenterimg/grenxin.png"></img>
                </div>
            </div>
       </div>
       <div class="rong">
            <div class="rong1">
                <div class="dindanss">
                    <div class="dindannum">总订单数</div>
                    <div class="dindanprice">600</div>
                </div>
                <div class="dindanrong">
                    <div class="added">比昨日+0<image src=""></image></div>
                    <div class="bottom">
                        <div class="bottom1">
                            <div class="todaynum">今日订单数</div>
                            <div class="price">0</div>
                            <div class="add">比昨日+0<img src=""></img></div>
                        </div>
                        <div class="bottom1 tomadd">
                            <div class="todaynum">本月订单数</div>
                            <div class="price">0</div>
                            <div class="add">比昨日+0<image src=""></image></div>
                        </div>
                    </div>
                </div>
            </div>
            <div class="rong2">
                <div class="img">
                    <div class="img1">
                        <img src="../assets/datacenterimg/price.png"><img>
                    </div>
                </div>
                <div class="imgrong">
                    <div class="dannum">接单量</div>
                    <div class="prices">0</div>
                    <div class="adds">比昨日+0</div>
                </div>
            </div>
            <div class="rong2">
                <div class="img">
                    <div class="img1">
                        <img src="../assets/datacenterimg/price.png"><img>
                    </div>
                </div>
                <div class="imgrong">
                    <div class="dannum">应答量</div>
                    <div class="prices">0</div>
                    <div class="adds">比昨日+0</div>
                </div>
            </div>
            <div class="rong4">
                <div class="rprice ad">
                    <div class="jilu">总流水</div>
                    <div class="qian">400000</div>
                </div>
                <div class="rprice ad2">
                    <div class="jilu">平均流水</div>
                    <div class="qian">20000</div>
                </div>
                <div class="rprice ad3">
                    <div class="jilu">回收贡献分</div>
                    <div class="qian">20000</div>
                </div>
            </div>
       </div>
       <div class="toms">回收贡献分 = 所有合伙人司机在商城消耗的贡献分总和</div>
    </div>
  </template>
  
  <script setup>
     import { getCodeImg } from "@/api/login";
     import Cookies from "js-cookie";
     import { encrypt, decrypt } from "@/utils/jsencrypt";
     import useUserStore from '@/store/modules/user'
  
  

  </script>
  
  <style lang='scss' scoped>
        .title{
            background-color: whitesmoke;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 15px 20px 15px 20px;
            .title1{
                width: 24%;
                height: 100px;
                background-color: skyblue;
                display: flex;
                justify-content: space-between;
                align-items: center;
                border-radius: 6px;
                .title_total{
                    width: 65%;
                    height: 100%;
                    // background-color: slateblue;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    padding: 10px 0 4px 22px;
                    .zhong{
                        font-size: 14px;
                        color:white;
                        font-weight: bold;

                    }
                    .price{
                        font-size: 30px;
                        color:white;
                        font-weight: bold;
                        width: 180px;
                        height: 35px;
                        // background-color: saddlebrown;
                        overflow-x: scroll;
                        overflow-y: hidden;
                        white-space: nowrap;
                    }
                    .add{
                        font-size: 11px;
                        color:white;
                    }
                }
                .imgdiv{
                    width:21%;
                    height: 60%;
                    background-color: sandybrown;
                    margin-right: 14px;
                    border-radius: 50px;
                    img{
                        width: 100%;
                        height:100%
                    }
                }
            }
            .bak{
                   background-color: rgb(25,98,236);
            }
            .bak2{
                   background-color: rgb(252,145,49);
            }
            .bak3{
                   background-color: rgb(235,25,24);
            }
            .bak4{
                   background-color: rgb(0,207,155);
            }
        }
        .rong{
            background-color: whitesmoke;
            padding: 0px 20px 15px 20px;
            display: flex;
            justify-content: space-between;
            .rong1{
                width: 30%;
                height: 380px;
                background-color:rgb(2,210,158);
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                border-radius: 6px;
                .dindanss{
                    background-color:rgb(2,210,158);
                    height: 110px;
                    border-radius: 6px;
                    .dindannum{
                    font-size: 14px;
                    color:white;
                    font-weight: bold;
                    margin: 15px 0 0 22px;
                    }
                    .dindanprice{
                        width: 90%;
                        height: 40px;
                        overflow: scroll;
                        // background-color: red;
                        font-size: 30px;
                        font-weight: bold;
                        color:white;
                        margin: 15px 0 0 22px;
                        white-space: nowrap;
                    }
                }
                .dindanrong{
                    width: 100%;
                    height: 63%;
                    background-color: rgb(1,189,141);
                    // margin-left: -10px;
                    padding: 0 0 4px 22px;
                    border-radius: 6px;
                    .added{
                        font-size: 11px;
                        color:white;

                    }
                    .bottom{
                        width:calc(93% + 2px);
                        height:80%;
                        background-color: rgb(15,155,128);
                        margin-top: 22px;
                        display: flex;
                        padding: 20px 0 10px 7px;
                        border-radius: 16px;
                        .bottom1{
                            width: 50%;
                            // background-color: red;
                            display: flex;
                            flex-direction: column;
                            justify-content: space-between;
                            .todaynum{
                                font-size: 14px;
                                font-weight: bold;
                                color: white;
                            }
                            .price{
                                font-size: 30px;
                                font-weight: bold;
                                color: white;
                                margin-left: 13px;
                                width:88px;
                                overflow: scroll;
                                height: 35px;
                                // background-color: skyblue;
                                white-space: nowrap;
                                
                            }
                            .add{
                                font-size: 11px;
                                color: white;
                                margin-left: 13px;
                            }
                            &:last-child{
                                // background-color: rgb(95, 160, 9);
                                .price{
                                    margin-left: 28px;
                                }
                                .add{
                                    margin-left: 28px;
                                }
                            }
                        }
                        .tomadd{
                            margin-left: 60px;
                        }
                    }

                }
            }
            .rong2{
                width: 20%;
                height: 380px;
                // background-color: rgb(83, 150, 177);
                background: linear-gradient(to bottom, rgb(90,230,255), rgb(54,180,239));
                margin-left: 16px;
                border-radius: 6px;
                overflow: hidden;
                .img{
                    width:100%;
                    height: 65%;
                    // background-color: red;
                    padding: 14px 0 0 6px;
                    .img1{
                        width:60px;
                        height: 60px;
                        overflow: hidden;;
                        img{
                            width: 100%;
                            height: 100%;
                        }
                    }
                }
                .imgrong{
                    width:100%;
                    height: 35%;
                    background: linear-gradient(to bottom, rgb(60,190,240), rgb(54,180,239));
                    padding: 0 0 14px 14px;
                    display: flex;
                    flex-direction: column;
                    justify-content: space-between;
                    .dannum{
                        font-size: 14px;
                        color:white;
                        font-weight: bold;
                    }
                    .prices{
                        font-size: 30px;
                        color:white;
                        font-weight: bold;
                    }
                    .adds{
                        font-size: 11px;
                        color:white
                    }
                }
            }
            .rong4{
                width: 30%;
                height: 380px;
                margin-left: 16px;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
                .rprice{
                    width:100%;
                    height: 30%;
                    background-color: red;
                    border-radius: 6px;
                    padding: 14px 0 25px 12px;
                    .jilu{
                        font-size: 14px;
                        color:white
                    }
                    .qian{
                        width:80%;
                        height: 70%;
                        // background-color: skyblue;
                        font-size: 30px;
                        font-weight: bold;
                        color:white;
                        overflow: scroll;
                        margin-top: 10px;
                    }
                }
                .ad{
                    background-color: rgb(81,25,236);
                }
                .ad2{
                    background-color: rgb(252,145,49);
                }
                .ad3{
                    background-color: rgb(204,102,102);
                }
            }
        }
        .toms{
            // background-color: red;
            width: 700px;
            // margin-left: 52%;
            // margin-left: 570px;
            margin-left: 52%;
            font-size: 26px;
            letter-spacing: 2px;
            font-weight: bold;
            margin-top: 50px;
        }
        //去滚动条边框
        ::-webkit-scrollbar {
           width: 0px; /* 滚动条宽度 */ 
           height: 0px;
        }
        
  </style>
  